<template>
	<view class="constant">
		<view class="section-0">
			<view class="section-body">
				<view class="tab">
					<view @click="setCurIdx(idx, item.name)"
						:class="`item ${curName === item.name ? 'item__active' : ''} ${curIdx + 1 === idx ? 'item__active_next' : ''}`"
						v-for="(item, idx) in tabTop" :key="item.id">
						<view class="label">
							{{item.name}}
							<text v-if="item.type == 0">{{point1}}</text>
							<text v-if="item.type == 1">{{point2}}</text>
						</view>
						<view class="shape">
							<view class="shape-body"></view>
						</view>
						<view class="shape shape-mirrow">
							<view class="shape-body"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="top-c">
			<view class="top-input">
				<view class="top-input-text">
					名称
				</view>
				<text class="top-input-shu"></text>
				<input class="top-input-inp" type="text" v-model="from.project_name" />
			</view>
			<view class="top-input">
				<view class="top-input-text">
					类别
				</view>
				<text class="top-input-shu"></text>
				<input class="top-input-inp" type="text" v-model="from.type" />
			</view>
			<view class="top-btn">
				<view class="action" @click="handleResetForm()">
					<text>重</text>
					<text>置</text>
				</view>
				<view class="action search" @click="handleSearch()">
					<text>查</text>
					<text>询</text>
				</view>
			</view>
		</view>
		<view class="top-bottom-fir">
			<!-- 分割线 -->
		</view>
		<mescroll-uni ref="mescrollRef" :up="upOption" height='71%' @init="mescrollInit" @up="upCallback"
			:down="{use: false}">
			<view class="top-bottem">
				<view class="" v-for="(item,indx) in settlementList" :key='item.id'>
					<view class="top-content" @click="openlist(item.id)">
						<view class="">
							{{indx +1}}.
						</view>
						<view class="">
							{{item.project_name}}
						</view>
						<view :class="`action ${expandList.indexOf(item.id) !== -1 ? 'item__expand' : ''}`">
							<view class="iconfont icon-xiangyou1"></view>
						</view>
					</view>
					<view class="child" v-if="expandList.indexOf(item.id) !== -1" @click="go(item.id)">
						<!-- v-for="(item2, idx) in item.children" :key="item2.id + idx" -->
						<view class="child-item">
							<view class="child-item-top">
								<view class="">
									类别：<text>{{item.type}}</text>
								</view>
								<view class="">
									项目负责人：<text>{{item.person_liable}}</text>
								</view>
							</view>
							<view class="" style="margin-top: 30rpx;" v-if="curIdx===0">
								项目计划时间：<text>{{item.plan_start_time}}</text>
							</view>
							<view class="" style="margin-top: 30rpx;" v-if="curIdx===1">
								合同签订：<text>{{item.contract_date}}</text>
							</view>
						</view>
					</view>
				</view>
				<view class="top-kong" v-if="settlementList.length<=0">
					<view class="" style="margin:50rpx auto; width: 400rpx;text-align: center;">
						<image style="width: 300rpx;height: 300rpx;"
							src="https://www.mescroll.com/img/mescroll-empty.png" mode=""></image>
						<view class="">
							~空空如也~
						</view>
					</view>
				</view>
			</view>

		</mescroll-uni>
	</view>
</template>

<script>
	import {
		getTecProjectList,
		getTecProjectImplementList
	} from '@/api/technology.js';
	export default {
		data() {
			return {
				tabTop: [{
						name: '总体',
						id: 1,
						type: '0'
					},
					{
						name: '执行',
						id: 2,
						type: '1'
					}
				],
				pageSize: 20,
				mescroll: null, // mescroll实例对象 (此行可删,mixins已默认)
				upOption: {
					textNoMore: '-- 没有更多了 --'
				},
				curIdx: 0,
				curName: '总体',
				point1: 0,
				point2: 0,
				from: {
					project_name: '',
					type: ''
				},
				expandList: [],
				settlementList: []
			}
		},
		methods: {
			mescrollInit(mescroll) {
				this.mescroll = mescroll;
			},
			/*上拉加载的回调*/
			async upCallback(page) {
				if (this.curIdx == 0 && this.curName == '总体') {
					const {
						data
					} = await getTecProjectList({
						...this.from,
						page: page.num,
						pageSize: this.pageSize
					});

					if (data.data == '') {
						this.settlementList = []
					}
					if (data.code === 1 || data.code === 200) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = data.data.data;
						this.point1 = data.data.total
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						let totalPage = data.data.last_page;
						//设置列表数据
						if (page.num == 1) this.settlementList = []; //如果是第一页需手动置空列表
						this.settlementList = this.settlementList.concat(curPageData); //追加新数据
						// 请求成功,隐藏加载状态
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						this.mescroll.endByPage(curPageLen, totalPage);
						// setTimeout(() => {
						// 	this.mescroll.endSuccess(curPageLen)
						// }, 20)
						this.mescroll.endSuccess()
					} else {
						this.point1 = 0
						// 	//  请求失败,隐藏加载状态
						this.mescroll.endErr()
					}
				} else if (this.curIdx == 1 && this.curName == '执行') {
					const {
						data
					} = await getTecProjectImplementList({
						...this.from,
						page: page.num,
						pageSize: this.pageSize
					});
					if (data.data.total == undefined) {
						this.point2 = 0
					} else {
						this.point2 = data.data.total
					}
					if (data.data == '') {
						this.settlementList = []
					}
					if (data.code === 1 || data.code === 200) {
						// 接口返回的当前页数据列表 (数组)
						let curPageData = data.data.data;
						// 接口返回的当前页数据长度 (如列表有26个数据,当前页返回8个,则curPageLen=8)
						let curPageLen = curPageData.length;
						// 接口返回的总页数 (如列表有26个数据,每页10条,共3页; 则totalPage=3)
						let totalPage = data.data.last_page;
						//设置列表数据
						if (page.num == 1) this.settlementList = []; //如果是第一页需手动置空列表
						this.settlementList = this.settlementList.concat(curPageData); //追加新数据
						// 请求成功,隐藏加载状态
						//方法一(推荐): 后台接口有返回列表的总页数 totalPage
						this.mescroll.endSuccess()
						this.mescroll.endByPage(curPageLen, totalPage);
						// setTimeout(() => {
						// 	this.mescroll.endSuccess(curPageLen)
						// }, 20)
					} else {
						// 	//  请求失败,隐藏加载状态
						this.mescroll.endErr()
					}
				}
				uni.hideLoading()
			},
			setCurIdx(idx, name) {
				this.curIdx = idx;
				this.curName = name;
				uni.showLoading({
					title: '加载中。。。'
				})
				setTimeout(() => {
					uni.hideLoading()
				}, 500)
				this.mescroll.resetUpScroll();
			},
			handleResetForm() { //重置
				this.from.project_name = ''
				this.from.type = ''
				this.getpop1()
				this.getpop()
				this.mescroll.resetUpScroll();
			},
			handleSearch() { //查询
			if(this.from.project_name != '' || this.from.type != ''){
				uni.showLoading({
					title: '加载中'
				})
				this.mescroll.resetUpScroll();
				this.mescroll.scrollTo(0, 0);
				uni.hideLoading()
			}
				
			},
			openlist(id) {
				const idx = this.expandList.indexOf(id);
				if (idx !== -1) {
					this.expandList.splice(idx, 1);
				} else {
					this.expandList.push(id);
				}
			},
			async getpop1(){
				const {
					data
				} = await getTecProjectList();
				console.log(data);
				if(data.code==1){
								if (data.data.total == undefined) {
					this.point1 = 0
				} else {
					this.point1 = data.data.total
				}
				}
	
			},
			async getpop() {
				const {
					data
				} = await getTecProjectImplementList();
				if(data.code==1){
				    if (data.data.total == undefined) {
					this.point2 = 0
				} else {
					this.point2 = data.data.total
				   }
				}
			},
			go(id) {
				uni.navigateTo({
					url: '/pages/statistics/technology_projects/technology_qing/technology_qing?id=' + id +
						'&curIdx=' + this.curIdx + '&curName=' + this.curName
				})
			}
		},
		onLoad() {
			this.getpop()
		},
		onReady() {
			this.mescroll.resetUpScroll();
			this.mescroll.scrollTo(0, 0);
			this.mescroll.endErr()
		}
	}
</script>

<style lang="scss" scoped>
	.constant {
		background-color: #fff;
		color: #3b3c40;
	}

	.top-bottom-fir {
		width: 90%;
		margin: 0 auto;
		border-top: 2rpx solid #D5E5F4;
	}

	.top-kong {
		width: 100%;
		color: #3b3c40;
	}

	.top-c {
		width: 600rpx;
		padding-top: 30rpx;
		padding-left: 80rpx;
		background-color: #FAFBFD;

		.top-input {
			height: 50rpx;
			line-height: 50rpx;
			margin-bottom: 30rpx;
			border: 2rpx solid #2D5DFE;
			border-radius: 50rpx;
			display: flex;

			.top-input-text {
				width: 150rpx;
				text-align: center;
				font-size: 26rpx;
				color: #0535D6;
			}

			.top-input-shu {
				display: inline-block;
				width: 2rpx;
				height: 35rpx;
				line-height: 35rpx;
				margin-top: 8rpx;
				background-color: #7899B0;
			}

			.top-input-inp {
				height: 50rpx;
				line-height: 50rpx;
				padding-left: 20rpx;
				font-size: 26rpx;
			}
		}

		.top-btn {
			margin-bottom: 30rpx;
			display: flex;
			justify-content: space-between;

			.action {
				width: 288rpx;
				height: 48rpx;
				background-color: #395cf5;
				border-radius: 20rpx;
				text-align: center;
				line-height: 48rpx;
				font-size: 26rpx;
				font-weight: normal;
				font-stretch: normal;
				color: #ffffff;

				text {
					&:first-child {
						margin-right: 20rpx;
					}
				}
			}

			.search {
				background-color: #1534ce;
			}
		}
	}

	.top-bottem {
		.top-content {
			width: 90%;
			margin: 0 auto;
			height: 88rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			font-size: 26rpx;
			color: #3b3c40;
			font-family: SourceHanSansCN-Bold;
			letter-spacing: 2rpx;
			border-bottom: 2rpx solid #F2F2F0;

			.action {
				height: 88rpx;
				color: #3b3c40;

				.iconfont {
					font-size: 32rpx;
					transition: 0.2s ease;
					transform: rotate(90deg);
				}

			}

			view {
				&:nth-child(1) {
					flex: 0.02;
				}

				&:nth-child(2) {
					margin-top: 5rpx;
					height: 88rpx;
					margin-left: 2rpx;
					margin-right: 50rpx;
					line-height: 88rpx;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
					flex: 70%;
				}

				&:nth-child(3) {
					flex: 0.02;
					text-align: center;
					height: 88rpx;
					line-height: 88rpx;
				}
			}
		}

		.child {
			width: 100%;
			background: #F2F2FB;
			border-bottom: 2rpx solid #F2F2F0;

			.child-item {
				width: 90%;
				margin: 0 auto;
				font-size: 26rpx;
				color: #7F98AE;
				padding: 30rpx 0;
				letter-spacing: 3rpx;
				border-bottom: 2rpx solid #e3e8f5;
				box-sizing: border-box;
				@include clear();
				display: flex;
				flex-wrap: wrap;

				.child-item-top {
					width: 100%;
					display: flex;
					justify-content: space-between;
					align-items: center;

					view {
						flex: 50%;
					}
				}
			}
		}
	}

	.section-0 {
		width: 100%;
		background: #2e5efe;

		.section-body {
			width: 100%;
			height: 100%;
			border-top-left-radius: 50rpx;
			border-top-right-radius: 50rpx;
			background-color: #FAFBFD;
			overflow: hidden;

			.tab {
				width: 100%;
				height: 80rpx;
				@include clear();
				background-color: #1534ce;

				.item {
					width: 50%;
					float: left;
					height: 80rpx;
					background-color: #1534ce;
					position: relative;

					.label {
						height: 80rpx;
						line-height: 80rpx;
						position: relative;
						z-index: 10;
						box-sizing: border-box;
						text-align: center;
						width: 100%;
						font-size: 26rpx;
						font-weight: normal;
						font-stretch: normal;
						letter-spacing: 0rpx;
						color: #3A5DF5;

						text {
							color: #ffdc00;
							margin-left: 10rpx;
							font-size: 34rpx;
							font-weight: 700;
						}
					}

					.shape {
						z-index: 1;
						width: 50rpx;
						height: 50rpx;
						position: absolute;
						bottom: 0;
						left: -50rpx;
						background: #000;
						display: none;
						background-color: #FAFBFD;
						overflow: hidden;

						.shape-body {
							width: 50rpx;
							height: 50rpx;
							background-color: #1534ce;
							border-bottom-right-radius: 40rpx;
						}
					}

					.shape-mirrow {
						z-index: 1;
						left: 0;
						display: none;

						.shape-body {
							border-bottom-right-radius: 0rpx;
							border-bottom-left-radius: 40rpx;
						}
					}
				}

				.item__active {
					border-top-left-radius: 40rpx;
					border-top-right-radius: 40rpx;
					background-color: #FAFBFD;

					.label {
						color: #46464a;
					}

					.shape {
						display: block;
					}

					.shape-mirrow {
						display: none;
					}
				}

				.item__active_next {
					border-bottom-right-radius: 50rpx;

					.shape {
						display: none;
					}

					.shape-mirrow {
						display: block;
					}
				}

			}
		}
	}

	.item__expand {
		.iconfont {
			transform: rotate(-90deg) !important;
		}
	}
</style>
